<template>
    <div>
        <h1>仿学浪逻辑 https://doc.iyincaishijiao.com/12080/226029/</h1>

        <el-row :gutter="30">
            <el-col :span="4">
                <el-select v-model="now_search">
                    <el-option value="课程名称"></el-option>
                    <el-option value="任课老师"></el-option>
                </el-select>
            </el-col>
            <el-col :span="6">
                <el-input :placeholder="search_ph" v-model="kw">
                    <el-button slot="append" icon="el-icon-search" @click="search_btn"></el-button>
                </el-input>
            </el-col>
        </el-row>

        <div class="upbox">
            <div class="hd">
                <a href="javascript:;" @click="tjtp">添加图片</a>

                <input type="file" hidden ref="myfile" multiple @change="changeFile">
            </div>
            <div class="bd" @drop="dropHandler($event)">
                <!-- 遍历文件数组 -->
                <draggable @end="end_sort">
                    <div class="tu_wrap" v-for="(item, index) in files" :key="index">
                        <Tu :file="item" @done="tudone($event, index)"></Tu>
                    </div>
                </draggable>
            </div>
        </div>
        <h1>{{ filenamearr }}</h1>
        <el-button>确定</el-button>
    </div>
</template>

<script>
import Tu from './Tu.vue';
import draggable from 'vuedraggable';
export default {
    components: {
        Tu,
        draggable
    },
    mounted() {
        document.addEventListener('dragleave', function (e) {
            e.preventDefault(); //阻止浏览器默认事件
        }, true);
        document.addEventListener('dragleave', function (e) {
            e.preventDefault(); //阻止浏览器默认事件
        }, false);
        document.addEventListener('drop', function (e) {
            e.preventDefault(); //阻止浏览器默认事件
        }, true);
        document.addEventListener('drop', function (e) {
            e.preventDefault(); //阻止浏览器默认事件
        }, false);
        document.addEventListener('dragenter', function (e) {
            e.preventDefault(); //阻止浏览器默认事件
        }, true);
        document.addEventListener('dragenter', function (e) {
            e.preventDefault(); //阻止浏览器默认事件
        }, false);
        document.addEventListener('dragover', function (e) {
            e.preventDefault(); //阻止浏览器默认事件
        }, true);
        document.addEventListener('dragover', function (e) {
            e.preventDefault(); //阻止浏览器默认事件
        }, false);
    },
    data() {
        return {
            now_search: '课程名称',
            kw: '',
            files: [],
            filenamearr: []
        }
    },
    computed: {
        search_ph() {
            if (this.now_search == '课程名称') {
                return '请输入课程名称关键词';
            } else if (this.now_search == '任课老师') {
                return '请输入任课老师关键词';
            }
        }
    },
    methods: {
        // 拖拽排序
        end_sort(e) {
            console.log(e.newIndex);
            console.log(e.oldIndex);

            // 改变
            let shan = this.filenamearr.splice(e.oldIndex, 1)[0];
            this.filenamearr.splice(e.newIndex, 0, shan);
        },
        // 文件拖拽
        dropHandler(e) {
            // console.log(e.dataTransfer.files);
            // 追加
            this.files = [...this.files, ...e.dataTransfer.files];
        },
        // 点击搜索按钮
        search_btn() {
            var params = {};
            if (this.now_search == '课程名称') {
                params.kcmc = this.kw;
            } else if (this.now_search == '任课老师') {
                params.rkls = this.kw;
            }

            alert(JSON.stringify(params));
        },
        // 添加图片
        tjtp() {
            // 得到隐藏的那个框框
            let kuang = this.$refs.myfile;

            // 创建一个事件document.createEvent()
            var ev = document.createEvent('MouseEvents');
            // 初始化这个事件为点击事件
            ev.initEvent("click", true, true);
            // 发出这个事件
            kuang.dispatchEvent(ev);
        },
        // 当用户选择完图片
        changeFile(e) {
            // 追加
            this.files = [...this.files, ...e.target.files];
        },
        // 子组件上传完毕
        tudone(res, index) {
            console.log(res, index);

            // 如果你要设置数组指定下标位置的内容，就要用$set()。
            this.$set(this.filenamearr, index, res.info);
        }
    },
}
</script>

<style lang="less" scoped>
.upbox {
    margin-top: 30px;
    width: 800px;
    border: 1px solid rgb(149, 148, 148);

    .hd {
        line-height: 30px;
        padding-left: 10px;
        border-bottom: 1px solid rgb(191, 190, 190);

        a {
            color: goldenrod;
        }
    }

    .bd {
        overflow: hidden;
        padding: 20px;

        .tu_wrap {
            float: left;
            margin-right: 10px;
            margin-bottom: 10px;
        }
    }
}
</style>